

<title>部署配置</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href=""></a>
        <a><cite>部署配置</cite></a>
    </div>
</div>

<link href="__style__/admin/index.css?v=1" type="text/css" rel="stylesheet" />
<link href="__style__/admin/index_me.css" type="text/css" rel="stylesheet" />


<style>

    /** layui-v2.5.7 MIT License */
    html #layuicss-skincodecss {
        display: none;
        position: absolute;
        width: 1989px
    }

    .layui-code-h3,.layui-code-view {
        position: relative;
        font-size: 12px
    }

    .layui-code-view {
        display: block;
        margin: 10px 0;
        padding: 0;
        border: 1px solid #e2e2e2;
        border-left-width: 6px;
        background-color: #F2F2F2;
        color: #333;
        font-family: Courier New
    }

    .layui-code-h3 {
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        border-bottom: 1px solid #e2e2e2
    }

    .layui-code-h3 a {
        position: absolute;
        right: 10px;
        top: 0;
        color: #999
    }

    .layui-code-view .layui-code-ol {
        position: relative;
        overflow: auto
    }

    .layui-code-view .layui-code-ol li {
        position: relative;
        margin-left: 45px;
        line-height: 20px;
        padding: 0 5px;
        border-left: 1px solid #e2e2e2;
        list-style-type: decimal-leading-zero;
        *list-style-type: decimal;
        background-color: #fff
    }

    .layui-code-view pre {
        margin: 0
    }

    .layui-code-notepad {
        border: 1px solid #0C0C0C;
        border-left-color: #3F3F3F;
        background-color: #0C0C0C;
        color: #C2BE9E
    }

    .layui-code-notepad .layui-code-h3 {
        border-bottom: none
    }

    .layui-code-notepad .layui-code-ol li {
        background-color: #3F3F3F;
        border-left: none
    }


    .my-setting {
        margin: 10px 0px;
        background: #fff;
        border-radius: 8px;
    }

    .my-setting .head {
        height: 40px;
        line-height: 40px;
        background: #F5FAFF;
        display: flex;
        justify-content: space-between;
        border-radius: 8px;
    }

    .my-setting .head .title {
        padding-left: 16px;
    }

    .my-setting .head .action {
        padding: 0px 15px;
    }
    .my-setting .contents{
        font-size: 13px;
        color: #555555;
    }

    .copy-js-content{
        display: block;
        width: 100%;
        padding: 10px;
        border: none;
        resize: none;
        background: rgba(240, 240, 240, .8);
        margin: 5px 0;
    }
    .layui-btn.layui-btn-normal{
        color: #1E9FFF;
        background: #ffffff;
        border: 1px solid #1E9FFF;
        height: 32px;
        line-height: 32px;
        margin-left: 20px;
        border-radius: 15px;
    }

    #wolive-js , #wechat-mp,#personal{
        padding-left: 16px;
        margin-bottom: 10px;
        color: #555555;
        font-size: 14px;
        border-radius: 8px;
        background: #f7f7f7;
    }
    #container{
        background-color: #fff;
    }
    #test-form-theme *,#test-form *,.layui-btn-container *,.layui-colorpicker-main-input *{box-sizing:content-box;-webkit-box-sizing:content-box; }
    .layui-colorpicker-main-input input.layui-input{width: 130px;}
    .layui-form-item{margin-bottom: 0;}
</style>

<script type="text/javascript">
    var width =document.body.clientWidth;
    var changeall =function(){
        $("#layout-west").css("width","160px");
        $("#layout-center").css({"position":"absolute","left":"160px","width":(width-160)+"px"});
        $(".info").removeClass("hide");
        $(".west_foot2").removeClass("hide");
        $(".west_foot1").addClass("hide");
        if($(".notices")[0].textContent > 0) {
            $('.notices').removeClass("hide");
            $('.notices-icon').addClass("hide");
        }
    }
    var changesmall =function(){
        if($(".notices")[0].textContent > 0) {
            $('.notices').removeClass("hide");
        }
    }
    // setInterval(function(){
    //     changesmall();
    // },1000);
    var is_bind_wechat = 1;
    if (!is_bind_wechat) {
        var index = layer.open({
            content: '您还未绑定微信，无法接受模板消息'
            ,btn: ['前去绑定','忽略']
            ,yes: function(index, layero){
                $.ajax({
                    url: "/admin/index/qrcode.html",
                    dataType: 'json',
                    success: function (res) {
                        layer.close(index);
                        layer.open({
                            type: 1,
                            content: '<img  src="'+res.data+'"/>',
                        });
                    }
                });
                return false;
            },
            btn2: function(index, layero){
                //按钮【按钮二】的回调

                //return false 开启该代码可禁止点击该按钮关闭
            }
            ,cancel: function(){

            }
        });
    }
</script>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">网页弹出层</li>
                        <li>网页新页面</li>
                        <li>直达客服链接</li>
<!--                        <li class="">弹层接入</li>-->
                    </ul>
                    <div class="layui-tab-content">

                        <div class="layui-tab-item layui-show  ">
                            <div class="my-setting">
                                <div class="head">
                                    <div class="title">
                                        部署网页组件（推荐）：网页咨询组件同时支持桌面网站和移动网站，提供强大的用户行为采集能力和系统对接能力
                                    </div>
                                </div>
<pre class="layui-code code-demo" lay-options="{}">
{$js|raw}
</pre>
                            </div>
                        </div>
                        <div class="layui-tab-item   ">
                            <div class="my-setting">
                                <div class="head">
                                    <div class="title">
                                        你可以在任何地方通过在固定连接后面添加客服的标识，实现接入指定客服的功能
                                    </div>
                                </div>
<pre class="layui-code code-demo" lay-options="{}">
 {$html2|raw}
</pre>
                            </div>
                        </div>

                        <div class="layui-tab-item">
                            <div class="my-setting">
                            <div class="head">
                                <div class="title">
                                    你可以在任何地方通过在固定连接后面添加客服的标识，实现接入指定客服的功能
                                </div>
                            </div>
                            <div class="layui-card-body">
                                <table class="layui-table">
                                    <thead>
                                    <tr>
                                        <th>客服名称</th>
                                        <th>访问连接</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {volist name='lists' id='vo'}
                                    <tr>
                                        <td>{$vo.name}</td>
                                        <td>{$vo.url}</td>
                                    </tr>
                                    {/volist}
                                    </tbody>
                                </table>
                            </div>
                            </div>
                        </div>
                        <div class="layui-tab-item ">
                            <div class="layui-card-body">
                                <h3>在您要接入的网站内添加如下的代码：</h3>
                                <div class="layui-code">
                                    &lt;script src="{$root_url}/layer/ai_service_{$app_key}.js" charset="UTF-8">&lt;/script>
                                </div>
                                <h3>则会在您的网站上显示咨询客服按钮</h3>
                                <br/>
                                <ul class="site-doc-bgcolor">
                                    <li class="layui-bg-red" style="padding: 10px">如果你们的网站有自己的 用户id 、用户名、头像信息，您可以通过如下方式传入</li>
                                </ul>
                                <div class="layui-code">
                                    &lt;script type="text/javascript"> <br>
                                    &nbsp;&nbsp;var ai_service={}; <br>
                                    &nbsp;&nbsp;ai_service.visitor_id='';//访客id <br>
                                    &nbsp;&nbsp;ai_service.visitor_name='';//访客昵称 <br>
                                    &nbsp;&nbsp;ai_service.avatar='';//访客头像绝对路径 <br>
                                    &nbsp;&nbsp;ai_service.product='{}';//json数据字符串 <br>
                                    &lt;/script>
                                </div>
                                <table class="layui-table">
                                    <thead>
                                    <tr>
                                        <th>参数</th>
                                        <th>解释</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>visitor_id</td>
                                        <td>访客的唯一标识，可以是你网站的用户id 或者 其他标识，不传系统自动生成 uuid</td>
                                    </tr>
                                    <tr>
                                        <td>visitor_name</td>
                                        <td>访客的昵称，不传的话，系统自动会拼接 '访客' + uid</td>
                                    </tr>
                                    <tr>
                                        <td>avatar</td>
                                        <td>访客的头像，即您网站的用户头像, 不传默认是系统的通用头像</td>
                                    </tr>
                                    <tr>
                                        <td>product</td>
                                        <td>携带商品信息</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    layui.use(['form','code','colorpicker'], function(){
        var form = layui.form,colorpicker = layui.colorpicker,$ = layui.$;

        form.render();
        //各种基于事件的操作，下面会有进一步介绍
        // 提交事件
        form.on('submit(buildHtml)', function(data){
            var field = data.field; // 获取表单字段值

            $("#codearea").removeClass('layui-hide');
            $("#frontjs").siblings().addClass('layui-hide');
            $.ajax({
                url:"{:url('build')}", //请求的url地址
                dataType:'json',
                data:field,
                type:"POST",   //请求方式
                success:function(res){
                    if(res.code == 0){
                        $("#frontjs").removeClass('layui-hide');
                        $("#frontjs .layui-code").html(res.data.html);
                        layui.code({elem:'#frontjs .layui-code'});

                        if (res.message)
                        {
                            layer.msg(res.message,{icon:1,end:function(){
                                }});
                        }
                    }else{
                        layer.msg(res.msg,{icon:2});
                    }
                }
            });


            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });

        colorpicker.render({
            elem: '#test-form'
            ,color: '#13c9cb'
            ,done: function(color){
                $('#m_kfbtbg').val(color);
            }
        });
        colorpicker.render({
            elem: '#test-form-theme'
            ,color: '#13c9cb'
            ,done: function(color){
                $('#theme').val(color);
            }
        });
        // layui.code({elem:'#minjs .layui-code'});

    });



</script>